<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>poi点控制</title>
  <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.1/minemap.css">
  <script src="http://minedata.cn/minemapapi/v1.1/minemap.js"></script>
  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
    }

    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="map">
  <button onclick="layerVisibilityToggle('none')">隐藏图层</button>
  <button onclick="layerVisibilityToggle('visible')">显示图层</button>
  <button onclick="displayAll('visible')">显示图层</button>
  <button onclick="displayAll('none')">隐藏图层</button>
</div>
<script>

  minemap.accessToken = '5fa8b08a69b347b99bf0e2722582c5e8';
  minemap.solution = 319;
  var map = new minemap.Map({
    container: 'map',
    style: "http://minedata.cn/service/solu/style/id/319",
    center:[116.46, 39.92],
    zoom: 12,
    pitch: 0
  });

  map.on("load", function () {

    map.addSource(
      "PoiSource", {
        "type": "vector",
        "tiles": ["minemapdata://Poi/{z}/{x}/{y}"]
      }
    )

    map.addLayer({
      "id": "natureObjLayer",
      "type": "symbol",
      "source": "PoiSource",
      "source-layer": "Poi",
      "maxzoom": 18,
      "minzoom": 10,
      "layout": {
        "icon-image": "swimming-15",
        "text-field": "{name_zh}",
        "text-size": 9,
        "text-offset": [0, -1],
        "text-anchor": "bottom"
      },
      "paint": {
        "text-color": "#a28940",
        "icon-color": "#a28940",
      },
      "filter": ["all", ["in", "class", 22]]
    })
    map.addLayer({
      "id": "agricultureLayer",
      "type": "symbol",
      "source": "PoiSource",
      "source-layer": "Poi",
      "maxzoom": 18,
      "minzoom": 10,
      "layout": {
        "icon-image": "music-15",
        "text-field": "{name_zh}",
        "text-size": 9,
        "text-offset": [0, -1],
        "text-anchor": "bottom"
      },
      "paint": {
        "text-color": "#84ee08",
        "icon-color": "#84ee08",
      },
      "filter": ["all", ["in", "class", 25]]
    })

    map.addLayer({
      "id": "carSaleLayer",
      "type": "symbol",
      "source": "PoiSource",
      "source-layer": "Poi",
      "maxzoom": 18,
      "minzoom": 12,
      "layout": {
        "icon-image": "swimming-15",
        "text-field": "{name_zh}",
        "text-size": 9,
        "text-offset": [0, -1],
        "text-anchor": "bottom"
      },
      "paint": {
        "text-color": "#ff9800",
        "icon-color": "#ff9800",
      },
      "filter": ["all", ["in", "class", 14]]
    })

//    map.addLayer({
//      "id": "companyLayer",
//      "type": "symbol",
//      "source": "PoiSource",
//      "source-layer": "Poi",
//      "maxzoom": 18,
//      "minzoom": 12,
//      "layout": {
//        "icon-image": "museum-15",
//        "text-field": "{name_zh}",
//        "text-size": 9,
//        "text-offset": [0, -1],
//        "text-anchor": "bottom"
//      },
//      "paint": {
//        "text-color": "#673ab7",
//        "icon-color": "#673ab7",
//      },
//      "filter": ["all", ["in", "class", 22]]
//    })

    map.addLayer({
      "id": "financialLayer",
      "type": "symbol",
      "source": "PoiSource",
      "source-layer": "Poi",
      "maxzoom": 18,
      "minzoom": 12,
      "layout": {
        "icon-image": "veterinary-15",
        "text-field": "{name_zh}",
        "text-size": 9,
        "text-offset": [0, -1],
        "text-anchor": "bottom"
      },
      "paint": {
        "text-color": "#D74F25",
        "icon-color": "#D74F25",
      },
      "filter": ["all", ["in", "class", 15]]
    })


    map.addLayer({
      "id": "researchTechLayer",
      "type": "symbol",
      "source": "PoiSource",
      "source-layer": "Poi",
      "maxzoom": 18,
      "minzoom": 12,
      "layout": {
        "icon-image": "college-15",
        "text-field": "{name_zh}",
        "text-size": 9,
        "text-offset": [0, -1],
        "text-anchor": "bottom"
      },
      "paint": {
        "text-color": "#9e9e9e",
        "icon-color": "#9e9e9e",
      },
      "filter": ["all", ["in", "class", 24]]
    })


//    map.addLayer({
//      "id": "hotelLayer",
//      "type": "symbol",
//      "source": "PoiSource",
//      "source-layer": "Poi",
//      "maxzoom": 18,
//      "minzoom": 12,
//      "layout": {
//        "icon-image": "religious-muslim-15",
//        "text-field": "{name_zh}",
//        "text-size": 9,
//        "text-offset": [0, -1],
//        "text-anchor": "bottom"
//      },
//      "paint": {
//        "text-color": "#fae118",
//        "icon-color": "#fae118",
//      },
//      "filter": ["all", ["in", "class", 12]]
//    })



//    map.addLayer({
//      "id": "RestaurantLayer",
//      "type": "symbol",
//      "source": "PoiSource",
//      "source-layer": "Poi",
//      "maxzoom": 18,
//      "minzoom": 10,
//      "layout": {
//        "icon-image": "restaurant-15",
//        "text-field": "{name_zh}",
//        "text-size": 9,
//        "text-offset": [0, -1],
//        "text-anchor": "bottom"
//      },
//      "paint": {
//        "text-color": "#c9c50b",
//        "icon-color": "#c9c50b",
//      },
//      "filter": ["all", ["in", "class", 11]]
//    })

  })

    var popup = new minemap.Popup({
      closeButton: false,
      closeOnClick: false
    })

  var layerList=  []
    map.on('mousemove', function (e) {
      var features = map.queryRenderedFeatures(e.point, {layers:['companyLayer',"natureObjLayer","agricultureLayer",
        "carSaleLayer","financialLayer","researchTechLayer", "hotelLayer","RestaurantLayer",]});
      map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

      if (!features.length) {
        popup.remove();
        return;
      }
      /**
       * 如果在点击的位置有多个响应类型的点或者线，会获取一个feature的数组
       */
      var feature = features[0];
      popup.setLngLat(feature.geometry.coordinates)
        .setHTML("图层：" + feature.layer.id
          + "<br>单位：" + feature.properties.name_zh
          + "<br>经纬度：" + feature.geometry.coordinates)
        .addTo(map);
    });


    function layerVisibilityToggle(value) {
      map.setLayoutProperty("hospitalLayer", 'visibility', value);
      map.setLayoutProperty("educationLayer", 'visibility', value);
      map.setLayoutProperty("governmentLayer", 'visibility', value);
    };

    function displayAll(value) {
      map.setLayoutProperty("allLayer", 'visibility', value);
    };


</script>
</body>
